<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { getUserInfo } from '@/api/auth'
import { useUserStore } from '@/store/user'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '我的资料',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 加载用户信息
onLoad(() => {
  loadUserProfile()
})

// 获取用户资料
async function loadUserProfile() {
  try {
    const res = await getUserInfo()
    userStore.setUserInfo(res.data.userInfo)
  }
  catch (error) {
    console.error('获取用户资料失败:', error)
    uni.showToast({
      title: '获取资料失败',
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="user-profile-container min-h-screen bg-slate-50 p-4">
    <view class="form-container rounded-lg bg-white p-4">
      <!-- 姓名 -->
      <view class="form-item mb-5 flex items-center">
        <view class="label w-1/4 text-sm text-slate-700">
          姓名
        </view>
        <view class="w-3/4 border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900">
          {{ userInfo?.userInfo?.realname || '暂无信息' }}
        </view>
      </view>

      <!-- 手机号 -->
      <view class="form-item mb-5 flex items-center">
        <view class="label w-1/4 text-sm text-slate-700">
          手机号
        </view>
        <view class="w-3/4 border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900">
          {{ userInfo?.userInfo?.phone || '暂无信息' }}
        </view>
      </view>

      <!-- 邮箱 -->
      <view class="form-item mb-5 flex items-center">
        <view class="label w-1/4 text-sm text-slate-700">
          邮箱
        </view>
        <view class="w-3/4 border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900">
          {{ userInfo?.userInfo?.employee?.enterpriseEmail || '暂无信息' }}
        </view>
      </view>

      <!-- 部门 -->
      <view class="form-item mb-5 flex items-center">
        <view class="label w-1/4 text-sm text-slate-700">
          部门
        </view>
        <view class="w-3/4 border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900">
          {{ userInfo?.userInfo?.sysDepart?.departName || '暂无信息' }}
        </view>
      </view>

      <!-- 职位 -->
      <view class="form-item mb-5 flex items-center">
        <view class="label w-1/4 text-sm text-slate-700">
          职位
        </view>
        <view class="w-3/4 border border-slate-200 rounded-lg bg-white px-4 py-3 text-slate-900">
          {{ userInfo?.userInfo?.employee?.jobTitleName || '暂无信息' }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.user-profile-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.form-container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-item {
  transition: all 0.2s ease;
}

.form-item .label {
  line-height: normal;
  white-space: nowrap;
}

.form-item view:not(.label) {
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
